<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { EV_LOGIN } from "@/constant/event";
import { Account } from "@/utils/account";
import { AppData } from "@/utils/app";
import { Router } from "@/utils/router";

import FormButton from "@/components/form/button.vue";

onLoad(() => {
  AppData.initConfig((config) => {
    menuList.value = [
      {
        name: "关于",
        url: `/package/other/pages/about/about`,
      },
      {
        name: "用户协议",
        url: config.user_agreement,
      },
      {
        name: "隐私政策",
        url: config.privacy_agreement,
      },
      {
        name: "安全中心",
        url: "/package/other/pages/secure/index",
        needLogin: true,
      },
    ];
  });
  isLogin.value = Account.isLogin;
});

const isLogin = ref(false);

const menuList = ref<any[]>([]);
const menuClick = (index: number) => {
  const menu = menuList.value[index];
  menu.needLogin
    ? Account.checkLogin((isLogin) => {
        Router.navigateToOrRedirectTo(isLogin, menu.url);
      })
    : Router.navigateTo(menu.url);
};

const logoutClick = () => {
  isLogin.value = false;
  AppData.deleteUserData();
  uni.$emit(EV_LOGIN, { type: "logout" });
  Router.navigateBack();
};
</script>

<template>
  <view class="setting-menu">
    <view
      class="setting-menu-item"
      v-for="(i, d) of menuList"
      :key="d"
      @click="menuClick(d)"
    >
      <view class="setting-menu-name">{{ i.name }}</view>
      <image
        class="setting-menu-icon"
        src="/package/other/static/setting-arrow.png"
      />
    </view>
  </view>

  <view class="set-btn" v-if="isLogin" @click="logoutClick">
    <FormButton>退出登录</FormButton>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 40rpx;
  background-color: #ffffff;
}

.setting-menu {
  .setting-menu-item {
    display: flex;
    align-items: center;
    height: 110rpx;
    padding: 0 30rpx;
  }

  .setting-menu-name {
    flex-grow: 1;
    min-width: 0;
    font-size: 30rpx;
    color: #333333;
  }

  .setting-menu-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
  }
}

.set-btn {
  position: fixed;
  left: 60rpx;
  right: 60rpx;
  bottom: calc(80rpx + env(safe-area-inset-bottom));
}
</style>